<template>
	<view class="mainPage">
		<view class="ticket">
			<view class="ticket-left">
				<u--image :src="ticketPic" height="120rpx" width="120rpx" mode="aspectFit"></u--image>
			</view>
			<view class="ticket-right">
				<view class="ticket-name">
					<view class="ticket-name-top">
						{{ticketName}}
					</view>
					<view class="ticket-name-bottom">
						<view class="ticket-unit">
							￥
						</view>
						<view class="ticket-price">
							{{price}}
						</view>
					</view>
				</view>
				<view class="ticket-num">
					<!-- 数量：1 -->
				</view>
			</view>
		</view>
		<view class="option">
			<u-cell-group :border="false">
				<u-cell title="退款金额" :titleStyle='{"color":"#7d7d7d"}'>
					<view slot="value" class="text">￥{{price}}</view>
					</u-cell>
				<u-cell title="备注说明" :border="false" :titleStyle='{"color":"#7d7d7d"}'>
					<u--input slot="value" v-model="remarks" class="mark" placeholder="请填写备注说明,100字以内" border="none" inputAlign="right"></u--input>
				</u-cell>
			</u-cell-group>
		</view>


		<view class="sure-btn" @tap="submitApply">申请退款</view>
	</view>
</template>

<script>
	import { toLogin } from '@/libs/login.js';
	import { mapGetters } from 'vuex';
	import { getRefundDetail,applyRefund } from '@/api/order.js';
	export default {
		data() {
			return {
				ticketName:'',
				ticketPic:'',
				price:'',
				errorNetwork: false,
				remarks:"",
				order_id:null,
				group_order_id:null,
				order_product_id:null,
			}
		},
		onLoad(option) {
			if (!option.order_id&&!option.group_order_id) return this.$util.Tips({
				title: '缺少参数无法退票'
			}, {
				tab: 3,
				url: 1
			});
			this.order_id = option.order_id
			this.group_order_id = option.group_order_id
			this.init()
		},
		onShow() {

		},
		methods: {
			//初始化
			init(){
				let id = this.order_id
				let params = {
					ids:this.group_order_id
				}
				getRefundDetail(id,params).then(res=>{
					// debugger
					console.log(res);
					let orderInfo = res.data.product[0].cart_info.product;
					this.ticketName = orderInfo.store_name
					this.ticketPic = orderInfo.image
					this.price = orderInfo.price
					this.order_product_id = res.data.product[0].order_product_id
				})
			},
			//提交退款申请
			submitApply(){
				let id = this.order_id
				let params = {
					refund_price:this.price,
					ids:this.order_product_id,
					mark:this.remarks
				}
				applyRefund(id,params).then(res=>{
					// uni.$u.toast(res.message)
					this.$util.Tips({
						title: res.message
					}, {
						tab: 4,
						url: '/pages/angling/myFishTicket?tab=2'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainPage {
		background-color: #f3f3f3;
	}

	.sure-btn {
		font-size: 24rpx;
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #ffc53e;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		margin-top: 100rpx;
		border-radius: 10rpx;
	}

	.ticket {
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: #fff;
		margin-top: 20rpx;

		.ticket-left {
			width: 120rpx;
		}

		.ticket-right {
			width: 550rpx;
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.ticket-name {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.ticket-name-top {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.ticket-name-bottom {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;

					.ticket-unit {
						font-size: 20rpx;
						font-weight: bold;
						color: #fe8c3f;
						margin-top: 8rpx;
					}

					.ticket-price {
						font-size: 28rpx;
						font-weight: bold;
						color: #fe8c3f;
					}
				}
			}

			.ticket-num {
				line-height: 120rpx;
			}
		}
	}

	.option {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		.text{
			color: #fe8c3f;
		}
		.mark{
			font-size: 24rpx;
		}
	}
</style>